<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简易CRM系统24234234</title>

    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@19.0.0",
          "react-dom": "https://esm.sh/react-dom@19.0.0",
          "react-dom/client": "https://esm.sh/react-dom@19.0.0/client"
        }
      }
    </script>

    <script type="module" src="https://esm.sh/run"></script>

    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <style>
      .loader {
        border-top-color: #3498db;
        -webkit-animation: spinner 1.5s linear infinite;
        animation: spinner 1.5s linear infinite;
      }
      @-webkit-keyframes spinner {
        0% {
          -webkit-transform: rotate(0deg);
        }
        100% {
          -webkit-transform: rotate(360deg);
        }
      }
      @keyframes spinner {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      #root {
        padding: 0;
        margin: 0;
      }
      .site-layout-content {
        min-height: 280px;
        padding: 24px;
      }

      /* 深色模式样式 */
      .ant-table-dark .ant-table {
        background-color: #1f2937;
        color: #e5e7eb;
      }

      .ant-table-dark .ant-table-thead > tr > th {
        background-color: #111827 !important;
        color: #e5e7eb !important;
        border-bottom: 1px solid #374151 !important;
      }

      .ant-table-dark .ant-table-tbody > tr > td {
        border-bottom: 1px solid #374151 !important;
        color: #e5e7eb;
      }

      .ant-table-dark .ant-table-tbody > tr:hover > td {
        background-color: #374151 !important;
      }

      .ant-table-dark .ant-empty-description {
        color: #e5e7eb;
      }

      .ant-table-dark .ant-pagination-item-link,
      .ant-table-dark .ant-pagination-item a {
        color: #e5e7eb !important;
      }

      .ant-table-dark .ant-pagination-item-active {
        background-color: #1677ff;
        border-color: #1677ff;
      }

      .ant-table-dark .ant-pagination-item-active a {
        color: white !important;
      }

      /* 深色模式下的表单样式 */
      .ant-form.text-white .ant-form-item-explain-error {
        color: #ff4d4f;
      }

      /* 深色模式下的标签页样式 */
      .ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab-active,
      .ant-tabs-card.ant-tabs-top > div > .ant-tabs-nav .ant-tabs-tab-active {
        background: #1677ff;
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/typescriptreact" lang="tsx">
      import React, { useState, useEffect } from 'react';
      import { createRoot } from 'react-dom/client';
      import { Button } from 'antd';

      interface abc {
        name: string;
      }

      const a:abc = {
        name: '123'
      }

      a.name = '12ggergegegrregergre'
      a = null;

      const App = ({children}) => {

        return (
          <div>
            {a.name}
          </div>
        )
      }
      // 渲染应用
      const root = document.getElementById('root') as HTMLElement;
      createRoot(root).render(
        <App>wefwfwe23jk94</App>
      );
    </script>
  </body>
</html>
